<template>
	<view>
		<view style="background-color: #fff;padding: 15rpx;height: 80rpx;width: 100%;">
			<!-- <search placeText="请输入订单关键词" bg="#F4F4F4"></search> -->
		</view>
		<view class="w96 radius20 bgwhite mt20 flex" style="flex-wrap: wrap;padding: 30rpx;text-align: center;">
			<view class="" style="width: calc(100%/3);height: 50%;" v-for="(i,index) in orderList" :key="i.name"
				@click="toItem(index)">
				<view class="" style="font-size: 40rpx;font-weight: bold;">
					{{i.value}}
				</view>
				<view class="" style="margin: 20rpx 0;font-size: 26rpx;">
					{{i.name}}
				</view>
			</view>
		</view>
		<view class="w96 radius20 bgwhite mt20" style="padding: 20rpx;text-align: center;">
			<mytabs style="width: 100%;" :items="list" @selected="onTabSelected"></mytabs>
			<u-line></u-line>
			<view class="content" style="min-height: 500rpx; text-align: center;" v-if="!todoList.length">
				<image src="@/static/order/empty.png" mode="" style="width: 400rpx; height: 400rpx;"></image>
				<view>暂时没有待办订单~</view>
				<view class="">去接单</view>
			</view>
			<view class="wrap" style="width: 100%;  max-height: 650rpx;" v-else>
				<scroll-view scroll-y="true" :scroll-top="0" class="scroll_views" @scrolltolower="lower"
					@scroll="scroll" refresher-enabled="true" :refresher-triggered="triggered"
					:refresher-threshold="100" refresher-background="lightgreen" @refresherpulling="onPulling"
					@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
					<view class="content " style="width: 100%; " v-for="i in todoList" :key="i.id">
						<view class="card  radius20 mt20" style=" width: 100%;background-color:#F7FCE6;padding: 40rpx;"
							@click="goDetail(i)">
							<view class="flex-between">
								<view class="" style="width: 80%;text-align: left;">
									{{i.province+i.city+i.area+i.address||'客户具体地址'}}
								</view>
								<view class=""
									style="border-radius: 4px;background: #E8F5BD;font-size:24rpx;padding: 15rpx;color: #5C6D08;"
									v-if="i.is_pay==0">
									待结算
								</view>
								<block v-else>
									<view class=""
										style="border-radius: 4px;background: #E8F5BD;font-size:24rpx;padding: 15rpx;color: #5C6D08;"
										v-if="i.is_refund==1">
										待服务
									</view>

									<view class=""
										style="border-radius: 4px;background: #E8F5BD;font-size:24rpx;padding: 15rpx;color: #5C6D08;"
										v-if="i.is_refund==2">
										待退款
									</view>
								</block>
							</view>
							<view class="mt20" style="text-align:left;font-size:24rpx;color:#ccc;line-height:1.5">
								订单类型:{{i.category_name||'家具维修'}}
							</view>
							<view class="" style="text-align:left;font-size:24rpx;color:#ccc;line-height:1.5">
								订单备注:{{i.goods_remark||'请自行携带工具上门'}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		my_order,
		todo
	} from '@/common/teacherReq';
	import mytabs from '@/components/mytabs.vue';
	import search from '@/components/search.vue';
	export default {
		components: {
			search,
			mytabs
		},
		data() {
			return {
				current: 1,
				list: [{
						name: '今日待办',
						index: 1
					},
					{
						name: '明日待办',
						index: 2
					},
					{
						name: '更多待办',
						index: 3
					}
				],
				orderList: [{
						name: '待服务',
						value: 0
					},
					{
						name: '待结算',
						value: 0
					},
					{
						name: '已结算',
						value: 0
					},
					{
						name: '商家催单',
						value: 0
					},
					{
						name: '退款',
						value: 0
					},
					{
						name: '报价记录',
						value: 0
					}
				],
				todoList: [],
				total: 0,
				triggered: false,
				isNull: false,
				page: 0,
			}
		},
		methods: {
			onTabSelected(item) {
				this.current = item.index;
				this.total = 0
				this.page = 0
				this.todoList = []
				this.isNull = false
				this.getTodo(this.current, this.page)
			},
			to(url) {
				uni.navigateTo({
					url: url,
					success: (e) => {
						console.log('e: ', e);
					},
					fail: (err) => {
						console.log('err: ', err);
					}
				})
			},
			goDetail(e) {

				uni.navigateTo({
					url: '/subpack/order/detail?id=' + e.id
				})
			},
			toItem(item) {
				console.log('item: ', item);
				this.to('/subpack/order/orderTep?name=' + this.orderList[item].name + '&id=' + (item + 1))
			},
			getOrder() {
				my_order({}).then(res => {
					this.orderList[0].value = res.data.order_num
					this.orderList[1].value = res.data.pay_num
					this.orderList[2].value = res.data.success_num
					this.orderList[3].value = res.data.cui_num
					this.orderList[4].value = res.data.refund_num
					this.orderList[5].value = res.data.baojia_num
				})
			},
			getTodo(type, page) {
				todo({
					type,
					page
				}).then(res => {
					if (res.data.order_list.length) {
						this.todoList = this.todoList.concat(res.data.order_list)
						this.total = res.data.total
					} else {
						this.isNull = true
					}
				})
			},
			lower(e) {
				if (this.isNull) {
					uni.showToast({
						title: '没有更多了',
						icon: 'error'
					})
					return
				}
				this.page += 1
				this.getTodo(this.current, this.page)
			},
			scroll(e) {
				// console.log(e, 'scroll')
			},
			onPulling(e) {
				// console.log("onpulling", e);
			},
			async onRefresh() {
				if (this._freshing) return;
				this.total = 0
				this.page = 0
				this.todoList = []
				this.isNull = false
				this._freshing = true;
				await this.getTodo(this.current, this.page)
				this.triggered = false;
				this._freshing = false;
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			onAbort() {
				console.log("onAbort");
			}
		},
		onLoad(opt) {
			this.getOrder()
			this.getTodo(this.current, this.page)
			this._freshing = false;
			setTimeout(() => {
				this.triggered = true;
			}, 1000)

		},
		onShow() {
			// console.log('122----------------')
			this.getOrder()
		}
	}
</script>

<style scoped lang="scss">
	.a {
		justify-content: space-around;
	}

	.scroll_views {
		// flex: 1;
		// height: calc(100vh - 100px);
		height: 650rpx;
		margin-top: 35px;
	}
</style>